<template>
    <div class="container">
      <div>
        <span @click="tui()">X</span>
        <el-input v-model="input" />
        <button @click="fa()">发布</button>
      </div>
      <div style="display: flex;">
        <div style="border: 1px solid #ccc;width: 600px;">
          <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
          />
          <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
          />
        </div>
        <div style="width: 400px;">{{ input }}</div>
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { useRoute } from 'vue-router'
  import '@wangeditor/editor/dist/css/style.css'
  import { ElMessage } from 'element-plus'
  import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
 import {tianjia} from '../../api'
  export default {
    components: { Editor, Toolbar },
    setup() {


      const input = ref('')

  
      
        onMounted(() => {
         
        })
        // 文章管理添加操作
        const data = ref('')
        var d = new Date();  //获取时间
        var hour = d.getHours(); //获取小时
        var minute = d.getMinutes();//获取分 bn
        var second = d.getSeconds();//获取秒
        console.log(d.getFullYear()); //年
        console.log(d.getMonth() + 1);  //月
        console.log(d.getDate())   //日
        console.log(hour, minute, second);  //小时分钟秒
 data.value = '' + d.getFullYear() + '-' + (d.getMonth() + 1) +'-' + d.getDate() + ' '+' ' + hour + ':' + minute + ':' + second

      const fa=()=>{
          console.log(input);
          tianjia({input,data}).then(res=>{
              console.log(res);
              
          })
      }
     
  
      const editorRef = shallowRef()
  
      // 内容 HTML
      const valueHtml = ref('<p>hello</p>')
  
      // 模拟 ajax 异步获取内容
      onMounted(() => {
        setTimeout(() => {
          valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
        }, 1500)
      })
  
      const toolbarConfig = {}
      const editorConfig = { placeholder: '请输入内容...' }
  
      // 组件销毁时，也及时销毁编辑器
      onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
      })
  
      const handleCreated = (editor: any) => {
        editorRef.value = editor // 记录 editor 实例，重要！
      }
      const tui = () => {
        window.location.href = "/Articlemanagement"
      }
      return {
    
        editorRef,
        valueHtml,
        mode: 'default', // 或 'simple'
        toolbarConfig,
        editorConfig,
        handleCreated,
        input,
      fa,
        tui
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
  </style>
  